<template>
    <div class="music-buttom-box">
        <div class="NO">{{index+1}}</div>
        <div class="musicBox">
            <div class="music between"><span class="TV">{{name}}</span></div>
            <div class="author between">{{ar[0].name}}</div>
        </div>                              
        <div class="begainBtn">
            <span class="starBtn"></span>
        </div>
    </div>
</template>
<script>
export default {
    props:{
        name:String,
        song:Object,
        ar:Array,
        alia:Array,
        index:Number
    },
    methods:{
        setIndex(i){
            return String(i).padStart(2,"0")
        }
    }
}
</script>
<style lang="scss" scoped>
.music-buttom-box{
    display: flex;
    border-bottom: 1px solid rgba(0,0,0,.1);
    margin-left:10px;
    .NO{
        color: #999;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        width: 28px;
        font-size: 17px;
        display: flex;
    }
    .NOColor{
        color: #df3436;
    }
    .musicBox{
        padding: 6px 0;
        width: 86%;
        .between{
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-break: normal;
        }
        .music{
            font-size: 17px;
            .TV{
                color: #000;
                margin-left: 4px;
                display: inline-block;
                max-width: 250px;
            }
        }
        .author{
            font-size: 12px;
            color: #888;
            padding-left: 5px;
        }
    }
    .begainBtn{
        width: 14%;
        display: flex;
        align-items: center;
        justify-content: center;
        .starBtn{
            background: url(//s3.music.126.net/m/s/img/index_icon_2x.png?5207a28…) no-repeat;
            background-size: 166px 97px;
            display: inline-block;
            width: 22px;
            height: 22px;
            background-position: -24px 0;
            
            
        }
    }
    
}
.SQlogo{
    display: inline-block;
    width: 12px;
    height: 8px;
    margin-right: 4px;
    background: url(//s3.music.126.net/m/s/img/index_icon_2x.png?5207a28…) no-repeat;
    background-size: 166px 97px;
}
</style>
